[typescript] ch03 타입스크립트의 타입 계층

in SteemCoinPan •  2 months ago 

ch03

타입스크립트의 타입 계층

  • unknown
    • undefined
    • void
    • null
    • any
      • number
        • number enum
      • bigint
      • boolean
      • string
        • string enum
      • symbol
        • unique symbol
      • object
        • array
          • tuple
        • function
        • constructor
  • never

3.1. 타입을 이야기 하다

  • 매개변수의 타입을 명시하도록 하자
    • 명시하지 않는 경우 암시적으로 any 타입이 지정

3.2. 타입의 가나다

3.2.1. any

any는 최후의 보루로 가급적 사용하지 않아야 한다.

tsconfig.json

noImplicitAny 를 true 로 선언하면 any로 추론되는 값이 있는 경우 예외를 발생 시킴
strict 가 true로 선언되어 있으면 위 내용을 포함한다.

기본적으로는 위 2가지는 true로 설정하여 작업하는 것을 권장

3.2.2. unknown

  • 타입을 검사해 정제(refine) 하기 전까지는 타입스크립트가 unknown 타입의 값을 사용할 수 없게 강제한다. (6.1.4 정제 참조)
  • unknown 은 비교연산(==,===, ||, &&, ?) 및 반전(!) 을 지원하고 typeof, instanceof 를 통해 정제 할 수 있다.
  • unknown 은 추론되지 않으며, 명시적으로 설정해야 된다.
  • unknown 은 unknown 이 아닌 값과 비교 할 수 없음
  • unknown 값이 특정 타입이라고 가정하고 해당 타입에서 지원하는 동작을 수행 할 수 없다.

3.2.3. boolean

  • let,var 와 const 의 추론은 다름에 유의
  • (자세한 내용은 6.1.4 타입 넓히기 참조)
  • 타입 리터럴(오직 하나의 값을 나타내는 타입)
let a = true; // boolean
let b = false; // boolean
const c = true; // true
let d: boolean = true; // boolean
//   let e: true = false;   // false 형식은 true 형식에 할당을 할 수 없음
let f: true = true; // true

3.2.4. number

긴 숫자는 나눠서 사용 가능

let oneMillion = 1_000_000; // 1000000 과 같음

3.2.5. bigint

tsconfig.json 에서 target을 es2020 이상으로 설정해야 동작

let a = 1234n; // 2^53 이상의 큰 수 연산을 할 수 있음

3.2.6. string

string 또한 리터럴 타입으로 지정하여 사용할 수 있음

let e: string = "zoom"; // string
let f: "john" = "john"; // john
let g: "john" = "joe"; // john

3.2.7. symbol

  • es2015에서 추가됨
  • 심벌키를 사용하면 사람들이 잘 알려진 키만 사용하도록 강제 할 수 있음
  • const 선언하면 특정 심볼로 됨 (string 의 literal 타입을 생각하면 쉬움)

3.2.8 객체

객체 리터럴 문법은 "이런 형태의 물건이 있어" 라고 말한다. 이 물건은 객체 리터럴 또는 클래스 일 수 있다.

class Person {
  firstname: string;
  lastname: string;
  constructor(firstname, lastname) {
    this.firstname = firstname;
    this.lastname = lastname;
  }
}

let p1: { firstname: string; lastname: string } = {
  firstname: "won",
  lastname: "sama",
};
let p2 = new Person("won", "sama");
console.log(p1);
console.log(p2);

// console
// { firstname: 'won', lastname: 'sama' }
// Person { firstname: 'won', lastname: 'sama' }

확실한 할당

a : 필수, b : 옵션, c : 여러개(옵션)

let a: { a: number; b?: number; [c: number]: boolean };

인덱스 시그니처(index signature)

[key:T]: U 같은 문법을 인덱스 시그니처라 부르며 타입스크립트에 어떤 객체가 여러 키를 가질 수 있음을 알려준다. "이 객체에서 모든 T 타입의 키는 U타입의 값을 갖는다" 라고 해석할 수 있다. 인덱스 시그니처를 이용하면 명시적으로 정의한 키 외에 다양한 키를 객체에 안전하게 추가할 수 있다.
인덱스 시그니처의 키(T)는 반드시 number 나 string 타입에 할당할 수 있는 타입이어야 한다.
키의 이름(key)은 key가 아니어도 된다.

let user: { readonly name: string } = { name: "wonsama" };

user.name = "wangsama"; // 오류, readonly

위와 같이 readonly로 지정하여 읽기 전용 속성으로 처리 할 수 있음.

객체 생성

let danger: {};
danger = {};
danger = { x: 1 };
danger = [];
danger = 3;
  • 리터럴 표기 : 특정 필드의 포함여부를 지정할 때 let wow :{a:string}
  • object 타입은 그 개체가 필요할 때 사용(값은 중요하지 않음) let wow : object
  • 빈 개체 표기법 {} 은 사용하지 않는 것이 좋음

3.2.9 휴식시간 : 타입별칭, 유니온, 인터섹션

타입별칭

type Age = number;
type Person = { name: string; age: Age };

let age: Age = 55;
let driver: Person = { name: "wonsama", age };

type Color = "red";
let flag = Math.Random() < 0.5;

if (flag) {
  type Color = "blue";
  let b: Color = "blue";
} else {
  let c: Color = "red";
}
  • 타입을 지정 함으로 좀 더 알아 보기 쉽게 구성할 수 있음
  • 내부에서 정의한 타입은 외부 정의를 덮어쓴다.

유니온과 인터섹션
: 유니온 - 합집합 / 인터섹션 - 교집합
실전에서는 유니온을 많이 사용함

type Cat = { name: string; purrs: boolean };
type Dog = { name: string; barks: boolean; wags: boolean };
type CatOrDogBoth = Cat | Dog; // name, purrs, barks, wags => cat or dog or both
type CatAndDog = Cat & Dog; // name

3.2.10 배열

let wow = []; // any[]
let a = [1, 2, 3]; // number[]
var b = ["a", "b"]; // string[]
let c: string[] = ["a"]; // string[]
let d = [1, "a"]; // (number|string)[]
const e = [2, "e"]; // (number|string)[]

let d = [1, "a"]; // 자동 추론 => (number|string)[]
d.map((_) => {
  if (typeof _ === "number") {
    // typeof 타입 구분 이후 분기
    return _ * 3;
  }
  return _.toUppercase();
});

최종 타입 할당

function buildArray() {
  let a: never = []; // 타입 미 지정 시 never[]임에 유의
  a.push(1); // number[]
  a.push("a"); // (number|string)[]
  return a; // 해당 함수는 최종적의로 위와 같은 타입이 된다 (number|string)[]
}

3.2.11 튜플(tuple)

배열의 서브 타입, 길이가 고정되었고, 각 인덱스의 타입이 알려진 배열의 일종. 다른 타입과 달리 튜플은 선언할 때 타입을 명시해야 한다. 자바ㅡ크립트에서 배열과 튜플에 같은 문법(대괄호)을 사용하는데 타입스크립트에서는 대괄호를 배열 타입으로 추론하기 때문이다.

내부적으로 불변 또한 해당 배열을 복사하여 처리 한 형태 이므로 성능 기준으로는 가급적 readonly 사용에 유의 함이 좋음.

let a: [number] = [1];

// [이름, 성, 생년] 튜플
let b: [string, string, number] = ["won", "sama", "2020"];

// 선택형 지원
let c: [number, number?][] = [[1, 2], [2], [1, 3]]; // let c : ([number]|[number, number])[] 와 동일

// 나머지 연산자 사용 가능
let d: [string, ...string[]] = ["1sama", "2sama", "3sama"]; // 1개 이상
let e: [number, string, ...string[]] = [1, "sama", "1sama", "2sama", "3sama"]; // 2개 이상

// readonly 사용가능(불변처리)
let as: readonly number[] = [1, 2, 3];
let bs: readonly number[] = as.concat(4);

as[4] = 5; // 불가, readonly
as.push(5); // 불가, readonly 는 push 가 없음

3.2.12 null, undefined, void, never

  • undefined : 아직 정의 하지 않음
  • null : 값이 없다는 의미
  • void : 명시적으로 아무것도 반환하지 않음
  • never : 절대 반환하지 않음 (오류, 무한반복 등)

3.2.13 enum(열거형)

단수명사로 쓰고, 첫 문자는 대문자로 하는 것을 관례로 함.

enum Language {
  English,
  Spanish,
  Korean,
}

const enum AAA {
  A,
  B,
  C,
}
function TT(aaa: AAA) {
  return aaa;
}
console.log(TT(99)); // 입력 가능함.
  • const enum은 배열의 값으로 접근이 불가함.
  • 숫자 값을 받는 열거형은 전체 열거형의 안전성을 해칠 수 있음.
  • enum은 값 미 지정 시 숫자로 할당 됨(0부터)
  • 함수로 해당 열거 타입을 전달 받으면 숫자도 입력 가능
  • 이를 막기 위해서 문자열을 할당하면 제약을 줄 수 있음.
  • typscript는 대체제가 많으므로 열거형 타입에 사용 유의

맺음말

그냥 책 보면서 주저리 기록 남기는 것 입니다.

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

@wonsama transfered 2 KRWP to @krwp.burn. voting percent : 78.21%, voting power : 17.28%, steem power : 1985789.04, STU KRW : 1200.
@wonsama staking status : 1793.429 KRWP
@wonsama limit for KRWP voting service : 1.793 KRWP (rate : 0.001)
What you sent : 2 KRWP
Refund balance : 0.207 KRWP [65044835 - b86f79092a4d06034ed98be337690301550d9720]

image.png

Upvoted! Thank you for supporting witness @jswit.
default.jpg

정리 감사합니다. 🙏🏻