타입스크립트 스터디 - 1

노요셉·2019년 9월 20일
0

typescriptStudy

목록 보기
1/3

handbook 부터


기본 타입

Boolean

let isDone: boolean = false;

Number
JavaScript와 마찬가지로 TypeScript의 모든 숫자는 부동 소수 점 값입니다.
TypeScript는 10진수 및 16진수와 함께 ECMAScript2015에 도입된 2진수 및 8진수 문자를 지원합니다.

let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;

String

배열 (Array)

let list: number[] = [1, 2, 3]; 배열
let list: Array<number> = [1, 2, 3]; 제너릭 배열 타입

튜플(Tuple)

// 튜플 타입 선언
let x: [string, number];
// 초기화
x = ["hello", 10]; // 좋아요
// 부정확한 초기화
x = [10, "hello"]; // 오류
console.log(x[0].substr(1)); // 좋아요
console.log(x[1].substr(1)); // 오류, 'number'은 'substr'을 가지고 있지 않습니다

x[3] = "world"; // 좋아요, 'string'은 'string | number'에 할당될 수 있습니다.

console.log(x[5].toString()); // 좋아요, 'string' 및 'number'에 모두 'toString'이 있습니다.

x[6] = true; // 오류, 'boolean'은 'string | number' 타입이 아닙니다.

열거 -> 가독성이 높겠죠?
보통 프로그래밍할때 색깔을 구분하고싶어요.
그러면 0 red, 1 green, 2 blue 이렇게 매핑을 해야되잖아요. 그리고
각각에 변수를 만들어서 값을 숫자나 문자로 구분할거 아니에요.

그냥 enum... 깔끔

enum Color {Red, Green, Blue}
let c: Color = Color.Green;

Any 타입을 모르겠다? 그런데 컴파일-타입 검사는 통과하고싶어?? 써~!

let notSure: any = 4;
notSure = "문자열일수도 있다";
notSure = false; // 좋아요, 확실한 boolean

Object랑 뭐가 다르냐고?

let notSure: any = 4;
notSure.ifItExists(); // 좋아요, 런타임에 ifItExists가 존재할 수 있습니다.
notSure.toFixed(); // 좋아요, toFixed는 존재합니다. (그러나 컴파일러는 체크하지 않습니다)

let prettySure: Object = 4;
prettySure.toFixed(); // 오류: 'Object' 타입에 'toFixed' 프로퍼티는 존재하지 않습니다.

Void c언어 배우잖어 반환값이 없으면 void지뭐

Null과 undefined
TypeScript에서 undefined와 null은 실제로 각기 undefined와 null이라는 자체적인 타입을 가집니다.

기본적으로 null과 undefined는 다른 모든 타입의 서브 타입입니다.

string 또는 null 또는 undefined 중 하나를 전달하고자 하는 경우 string | null | undefined (union 타입)을 사용할 수 있습니다.

Type assertions
type assertion은 다른 언어의 형 변환(타입캐스팅)과 비슷하지만 특별한 검사나 데이터를 재구성하지는 않습니다.
런타임에 영향을 미치지 않으며 컴파일러에서만 사용됩니다.

let someValue: any = "this is a string";

let strLength: number = (someValue as string).length;

TypeScript를 JSX와 함께 사용할 때는 as 스타일의 단언만 허용됩니다.


변수 선언

배열 비구조화 ? 그냥 배열 기호 안에 변수를 넣어, 그게 그냥 변수야.

let input = [1, 2];
let [first, second] = input;
console.log(first); // 1 출력
console.log(second); // 2 출력

비구조화는 이미 선언된 변수에서도 작동해. ----신박----

// 변수 교환
[first, second] = [second, first];

함수에 대한 매개 변수가 있는 경우

function f([first, second]: [number, number]) {
    console.log(first);
    console.log(second);
}
f([1, 2]);
let [first] = [1, 2, 3, 4];
console.log(first); // 1 출력

객체 비구조화

let o = {
    a: "foo",
    b: 12,
    c: "bar"
};
let { a, b } = o;

이것은 o.a와 o.b에서 새로운 변수 a와 b를 생성합니다. 필요없는 경우 c를 건너뛸 수 있습니다.
배열 기호 안에 넣은거랑 똑같이 객체 기호 안에 넣으면 그냥 그거 변수야.
대신 필드랑 매칭이 되야해. c는 매칭안됐잖아.

선언 없이도 가능

({ a, b } = { a: "baz", b: 101 });

형식을 지정하는 경우 전체 형식이 비구조화된 후에도 형식을 작성해야 합니다.

let { a, b }: { a: string, b: number } = o;
profile
서로 아는 것들을 공유해요~

0개의 댓글