타입스크립트는 변수,매개변수,리턴값에 타입 붙이는 것!

모두의희망·2022년 12월 12일
0

TypeScript

목록 보기
2/11
post-thumbnail

타입스크립트는 변수, 매개변수, 리턴값에 타입을 붙여준다!

const a: string = '5';
const b: number = 5;
const c: boolean =  true;
const d: undefined = undefined;
const f: symbol = Symbol.for('abc');
const e: null = null;
const f: any = true;

변수 뒤에 타입을 지정하는데 대문자는 안되고 소문자만 된다.

function add(x: number, y: number): number { return x + y }
const add: (x: number, y: number) => number = (x, y) => x + y;

타입을 지웠을 때도 완변한 자바스크립트 코드여야 한다.
지울 수 있는 부분이 타입 자리이다. 여기서는 (x: number, y: number) => number 이다.

type Add = (x: number, y: number) => number;
const add: Add = (x, y) => x + y;

type으로 타입을 선언하는 방식 타입 애일리어스(type alias)이다.

객체

const obj: { lat: number, lon: number } = { lat: 37.5, lon: 127.5 };

타입자리를 지워도 마찬가지로 자바스크립트 코드여야 한다. : { lat: number, lon: number } 를 지웠을시 js코드인지 확인.

배열

const arr: string[] = ['123', '456']
const arr2: number[] = [123, 456]
const arr2: Array<number>= [123, 456]; //꺽세를 제네릭이라고함. 제네릭이 매우 어려움.
const arr3: [number, number, string] = [123, 456, 'hello'];
interface Add {
    (x: number, y: number): number;
}
const add: Add = (x, y) => x + y;

interface를 사용하여 타입을 지정 할 수있다.

vs code를 설치한 이유? vscode가 저절로 tsc --noEmit이것을 계속 돌려준다(실행시켜준다). 그래서 에러가 저절로 뜬다.
이것과 더불어서 타입을 추론하는 역할도 한다. 최대한 타입스크립트가 추론하는 것을 믿어라.

function add(x: number, y: number): number { return x + y }
const result = add(1,2);

위에서 : number을 지우고 result에 마우스 커서를 올리면 number라고 추론하다 이는 x,y둘다 number라서 알아서 결과값도 number라고 추론하기 때문
반대로 x나 y에서 number를 지우면 이를 any라고 추론하는데 이것은 잘못 된것이다 따라서 x랑y는 꼭 타입을 지정해준다.

type Add = () => number;
interface Add {}
Array<string>

js변환시 사라지는 것들: 타입스크립트 코드를 작성후에 실행을 하면 타입부분은 사라진다.

let aa =123;
aa = 'hello' as unknown as number; 

as라는 키워드가 있어서 number를 강제로 타입을 바꾼다

function add(x: number, y: number): number;
function add(x, y) {
   return x + y;
}

위에는 타입만 나와있고 아래는 선언되어있는 이런 케이스가 있을 수 있다.

profile
개발을 진정성 있게 다가가겠습니다.

0개의 댓글