TS 구문

I. 변수 선언

식별자: 데이터 유형 = 할당.

변수는 var, let, const를 사용하여 선언할 수 있습니다.

var는 블록 범위가 지정되지 않으므로 사용하지 않는 것이 좋습니다.

TypeScript는 유형 파생(예: let foo = 'Hello\x20TypeScript';, 메시지는 문자열로 추론되고 메시지에 숫자를 할당하면 오류가 보고됨)을 수행하므로 변수를 선언할 때마다 데이터 유형을 작성할 필요가 없습니다.

II. 타입스크립트 유형

• any
• unknown
• viod
• never
• tuple

any: 식별자 유형에 제한이 없으며 JS와 마찬가지로 식별자에 대해 모든 연산을 수행할 수 있음을 나타냅니다.

알 수 없음: 불확정 유형의 변수를 설명하는 데 사용되며, 이 식별자에 대한 모든 연산은 불법입니다. 변수를 조작하려면 유형 축소를 수행해야 합니다.

void: 함수 타입의 반환값을 지정하는 데 사용됩니다.

never: 실제 프로젝트 개발에서 절대 발생하지 않는 값 유형 ⊙ ﹏ ⊙ ‖ ∣ ∣

튜플: 튜플 타입, React에서 useState()의 반환값은 튜플 타입입니다.

const info:[string,number] = ['hh',18]

튜플과 배열의 차이점은 무엇인가요?

1. 배열은 일반적으로 동일한 유형의 요소를 보유합니다.
2. 튜플 타입은 인덱스 값을 기반으로 값의 타입을 가져올 수 있지만 배열은 그렇지 않습니다.

III. 조인트 유형 및 유형 & 인터페이스

let foo: number | string = 'abc'

foo는 두 개 이상의 다른 타입으로 구성된 타입인 유니온 타입으로, 다음 타입 중 어느 것이든 될 수 있는 값을 나타냅니다.

유형은 모든 유형의 별칭이 될 수 있습니다.

ts
type myType = number | string 
let myFoo: myType = 222

type user = {
 name:string,
 age:number
}
let user1:user = {
 name:'alice',
 age:18
}

인터페이스에도 타입의 역할이 있고, 객체의 타입을 선언하는 데 사용할 수 있다면 둘의 차이점은 무엇인가요? 공식 웹사이트의 설명은 다음과 같습니다.

유형 별칭과 인터페이스는 매우 유사하며 대부분의 경우 자유롭게 선택할 수 있습니다. 인터페이스의 거의 모든 기능은 다음에서 사용할 수 있습니다. 유형 별칭과 인터페이스는 매우 유사하며 대부분의 경우 자유롭게 선택할 수 있습니다. 인터페이스의 거의 모든 기능을 유형으로 사용할 수 있으며, 중요한 차이점은 유형을 다시 열어 "새" 속성을 추가할 수 없다는 점과 항상 확장 가능한 인터페이스는 .

IV. 유형 어설션 및 비어 있지 않은 어설션

때때로 TS가 특정 유형 정보를 얻을 수 없는 경우 유형 어설션을 사용할 수 있습니다.

const foo = document.getElementById('my-id');

myEle의 유형은 getElementById()의 반환 값 유형인 HTMLElement | null이며, 이 경우 유형 어설션을 사용할 수 있습니다.

const myEle = document.getElementById('my-id') as HTMLImageElement

as 외에도 유형 어설션은 다음과 함께 사용할 수 있습니다.

const myEle = <HTMLImageElement>document.getElementById('my-id')

타입 어설션은 컴파일러에 의해 제거되며 코드의 런타임 동작에 영향을 미치지 않습니다.

널이 아닌 어설션! : 식별자에 값이 있다고 판단할 수 있으며 컴파일 단계에서 감지를 건너뛸 수 있음을 나타냅니다.

ts
function liveDangerously(x?: number | null) {
 // No error
 console.log(x!.toFixed());
}

V. 리터럴 타입

ts
let name:'hh'="hh"
여기서 이름은 리터럴

info.method는 문자열 유형이고 값은 post이지만 유니온 유형인 메서드에 할당할 수 없습니다.

다음과 같이 변경할 수 있습니다 request(info.url,info.method as 'post')

ts
const info = {
 url:'',
 method: "post"
} as const