우선 타입스크립트 설치 및 설정은 다음 링크 참고
Typescript
- 원시타입:
string,number,boolean
잘 사용하지 않지만bigint,symbol- 배열: [] (e.g.
number[],Array<number>)- 오브젝트: {} (e.g.
{x:number, y:number})- any: 타입 검사 비활성화 (typescript보다 똑똑할 때 쓰기)
- unknown: any 대신 사용, 모든 타입 사용 가능, 자료가 할당되어도 unknown
- 잘 사용하지 않는: null, undefined, never
- 그 외: Date 등의 타입이 있다.
- 사실 유니언 타입도 새로운 타입이 된다. (e.g.
number | string)
📌 타입 명시
// 변수 선언시 추론됨. 명시적으로 표기할 경우 사용
let temp :number = 24;
let books :string[] = ['wind', 'gone'];
let rabbit :{ear : number} = {ear: 2};
// literal type
// 유니언 타입이 아니면 const와 동일한 역할
let name :'kim' | 'park' = 'park';
unknown과 any의 차이점
- unknown은
- any 대신 사용할 수 있다.
- 아직 모르지만, 당장 다양한 타입을 넣어볼 때 사용
- 자료를 할당해도 unknown 타입
-
다음 예시에서 any와 다르게 unknown은 에러가 난다.
// ERROR let name: unknown; let child1: string = name; let child2: boolean = name; let child3: number = name;// ERROR let name: unknown; name[0]; name - 1; name.data;
유니언 타입
// 타입을 조합하는 방법 중 하나.
// 유니언 타입의 각 타입은 멤버라고 함.
// 모든 멤버가 유효한 작업이 아닐 경우에 narrowing
function guessWhat(x :number | string) :number | string {
if (typeof x === 'number') {
return x * 2
} else {
return "noting!"
}
}
// 배열
let array: (number | string)[] = [10, 'cat', 30]
// 오브젝트
let object: {data: (number | string)} = {
data: 30
}튜플 타입
// array 안에 순서를 포함하여 정확히 지정하고 싶을 때 사용.
type CarOptions = [number, boolean];
let car :CarOptions = [4, true]옵셔널 프로퍼티 ?
- 옵션은 사실상
string | undefined과 같다.
function printName(obj: { first: string; last?: string }) {
// ...
}
// 둘 다 OK
printName({ first: "Bob" });
printName({ first: "Alice", last: "Alisson" });readonly
const는 변수 재할당만 막기 object의 속성까지 막진 않는다. 만약 오브젝트 속성을 변경하지 못하도록 설정하려면readonly키워드를 사용한다.
let friend :{
readonly name: string,
} = {
name : 'jane'
}함수 parameter, return
- return이 없는 경우
:void로 작성
function getPos(x :number) :number {
return x * 2
}
function greet(person: string, date: Date) :void {
console.log(`Hello ${person}, today is ${date.toDateString()}!`);
}📌 type과 interface
type 키워드로 선언
- 재사용할 목적으로 타입 명시는 모두
type으로 지정할 수 있다. - 코드는 인터페이스와 키워드만 다른 것처럼 보이지만 차이점이 있다.
type Point = {
x: number;
y: number;
};
function printCoord(pt: Point) {
console.log("The coordinate's x value is " + pt.x);
console.log("The coordinate's y value is " + pt.y);
}
printCoord({ x: 100, y: 100 });interface 선언
interface Point {
x: number;
y: number;
}
function printCoord(pt: Point) {
console.log("The coordinate's x value is " + pt.x);
console.log("The coordinate's y value is " + pt.y);
}
printCoord({ x: 100, y: 100 });✅ type vs interface
확장할 때
- interface는
extends로 확장한다.
interface Animal {
name: string
}
interface Bear extends Animal {
honey: boolean
}- type은
&확장한다. |로 유니언 타입을 만들 수 있다.
type Animal = {
name: string
}
type Bear = Animal & {
honey: Boolean
}새 필드를 추가할 때
- interface는 재정의가 가능하다 (확장)
interface Window {
title: string
}
interface Window {
ts: TypeScriptAPI
}- type은 재정의가 불가능하다. (에러)
type Window = {
title: string
}
type Window = {
ts: TypeScriptAPI
}
// ERROR📌 as로 타입 단언하기
- 좀 더 명시적으로 사용하기
const myCanvas = document.getElementById("main_canvas") as HTMLCanvasElement;as const
- 오브젝트 전체를 리터럴 타입으로 변환.
- 오브젝트 속성이 모두
readonly가 된다.
const req = { url: "https://example.com", method: "GET" } as const;
handleRequest(req.url, req.method);출처
XD