🤖TYPESCRIPT ?

• TypeScript JavaScript의 superset이다.
  * 즉 JavaScript라는 언어 위에서 동작하는 언어라는 의미이다.
  • JavaScript + @(=type지정)
  • JavaScript 타입이 느슨한 언어이기 때문에 TypeScript를 사용해
    명확한 타입을 지정해줌으로써 개발자들이 하는 실수들을 줄여주고 좀 더 좋은 코드를 짤 수 있게 도와준다.

🐽Basic Type

Boolean

Number

String

// Boolean
let isDone: boolean = false;

// Number
let decimal: number = 6;

// String
let fullName: string = `Bob Bobbington`;

Array

• 각 타입에 []를 붙여 해당 타입의 배열을 나타내기
• 일반적인 배열 타입 Array을 사용합니다.
• 유니언 타입(다중 타입)의 ‘문자열과 숫자를 동시에 가지는 배열’도 선언할 수 있다.
• 배열이 가지는 항목의 값을 단언할 수 없다면 any를 사용할 수 있습니다.

// Array
// 1. 	
let list: number[] = [1, 2, 3];
// 2. 
let list: Array<number> = [1, 2, 3];
// 3.
let array: (string | number)[] = ['Apple', 1, 2, 'Banana', 'Mango', 3];
// Or
let array: Array<string | number> = ['Apple', 1, 2, 'Banana', 'Mango', 3];
//4.
let someArr: any[] = [0, 1, {}, [], 'str', false];

Tuple

• 튜플 타입을 사용하면 고정된 수의 요소 타입은 알고 있지만, 값의 종류가 다른 배열을 표현할 수 있다. 예를 들어, 문자열과 숫자의 쌍을 아래와 같이 표현할 수 있다.

// Tuple
let x: [string, number];
// Initialize it
x = ["hello", 10]; // OK
// Initialize it incorrectly
x = [10, "hello"]; // Error

Enum

• enum은 숫자값 데이터 셋에 사람이 더 친숙한 이름을 지정하는 방법이다.
• 기본적으로 enum은 0부터 시작하여 1씩 증가 멤버의 번호 매기기를 시작한다. 멤버 중 하나의 값을 수동으로 설정하여 변경할 수 있다. 예를 들어 이전 예제를 0 대신 1로 시작가능.
• 또는 enum의 모든 값을 수동으로 설정할 수 있다.
• enum의 편리한 기능은 숫자 값에서 enum의 값 이름으로 이동할 수 있다는 것 이다. 예를 들어 값이 2이지만 위의 색상 enum에 매핑된 것이 확실하지 않은 경우 해당 이름을 찾을 수 있다.

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

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

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

enum Color {Red = 1, Green, Blue}
let colorName: string = Color[2];
alert(colorName);

Any(모든타입)

• 값을 자신 또는 타사 라이브러리의 동적 콘텐츠에서 가져오는 것과 같이 프로그램을 작성할 때 알지 못하는 변수 유형을 설명해야 할 수도 있다. 이 경우 컴파일시 타입 검사를 하지 않고 지나가도록 해야 할때가 있는데. 이런 방법을 위해 any 타입을 사용한다.

// Any
let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // okay, definitely a boolean

Void

• void는 타입이 전혀 없다는 것에서 any의 반대 의미와 비슷합니다. 일반적으로 값을 반환하지 않는 함수의 반환 유형으로 이 타입을 사용한다.
• 하지만 void 타입의 변수 선언은 undefined 또는null 만 할당할 수 있기 때문에 그다지 유용하지 않다.

// Void
function warnUser(): void {
    alert("This is my warning message");
}
let unusable: void = undefined;

Null 과 Undefined

• TypeScript에서 undefined와 null은 실제로 각각 undefined와 null이라는 이름의 타입을 가지고 있습니다. void와 매우 비슷하게, 이 타입들은 그 자체로 매우 유용하지는 않다.

// Null 과 Undefined
let u: undefined = undefined;
let n: null = null;

객체: Object

• 기본적으로 typeof 연산자가 "object"로 반환하는 모든 타입을 나타낸다.
• 여러 타입의 상위 타입이기 때문에 그다지 유용하지 않다.
  보다 정확하게 타입 지정을 하기 위해 다음과 같이 객체 속성(Properties)들에 대한 타입을 개별적으로 지정할 수 있다.

// Object
let obj: object = {};
let arr: object = [];
let func: object = function () {};
let nullValue: object = null;
let date: object = new Date();

let userA: { name: string, age: number } = {
  name: 'HEROPY',
  age: 123
};
let userB: { name: string, age: number } = {
  name: 'HEROPY',
  age: false, // Error
  email: 'thesecon@gmail.com' // Error
};

• 반복적인 사용을 원하는 경우, interface나 type을 사용하는 것을 추천한다.

interface IUser {
  name: string,
  age: number
}

let userA: IUser = {
  name: 'HEROPY',
  age: 123
};

let userB: IUser = {
  name: 'HEROPY',
  age: false, // Error
  email: 'thesecon@gmail.com' // Error
};

interface

• 인터페이스(Interface)는 타입스크립트 여러 객체를 정의하는 일종의 규칙이며 구조이다.
  다음과 같이 interface 키워드와 함께 사용한다.
• 다음과 같이 속성에 ?를 사용하면 선택적 속성으로 정의할 수 있습니다.

// interface
// ‘IUser’에서 ‘I’는 Interface를 의미하는 별칭으로 사용했습니다.
interface IUser {
  name: string,
  age: number,
  isAdult?: boolean
}

let user1: IUser = {
  name: 'Neo',
  age: 123,
  isAdult: true
};

// Error - TS2741: Property 'isAdult' is missing in type '{ name: string; age: number; }' but required in type 'IUser'.
let user2: IUser = {
  name: 'Evan',
  age: 456
};

Never

• Never은 절대 발생하지 않을 값을 나타내며, 어떠한 타입도 적용할 수 없다.
• 보통 다음과 같이 빈 배열을 타입으로 잘못 선언한 경우, Never를 볼 수 있다.

function error(message: string): never {
  throw new Error(message);
}

const never: [] = [];
never.push(3);

유니언(Union)

• 2개 이상의 타입을 허용하는 경우, 이를 유니언(Union)이라고 한다.
  |(vertical bar)를 통해 타입을 구분하며, ()는 선택 사항이다.

let union: (string | number);
union = 'Hello type!';
union = 123;
union = false;

🐷React 🤟🏻 TypeScript

테스트 (환경) 셋팅

• npx create-react-app typescript-react-demo --typescript 로 설치하면 편리하게 React 🤟🏻 TypeScript 함께 사용가
  * npx : create-react-app을 실행시키는 command.
  • jsx대신 tsx로 셋팅되어있고 tsconfig.json이 생성된 구조의 폴더가 셋팅된다.

tsconfig rules

• tsconfig에는 몇가지 규칙이 있다.
• 이러한 규칙들은 typescript가 얼마나 strict할지 셋팅해줄 수 있다.
  • 예를들어 allowSyntheticDefaultImports : false
    • syntetic import를 허용해주지 않는다.
  • noImplicitAny : false
    • any type의 표현식과 선언문에 대한 경고를 준다.
    • 즉 타입을 쓰지 않아도 에러가 나지 않는다. 이 rule을 false로 주지 않고 타입을 지정하지 않는다면 에러가 나고 멈추게 된다.

definitely typed 사용

definitely typed 활용해서 Styled-Components사용하기

• Styled-Components에 대해서 typescript는 styled가 어떤 타입인지 모르기 때문에 definitely typed에 있는 Styled-Components type을 install해주면 된다.
  • npm install @types/styled-components (=이제 typeScript는 styled-components의 모든 타입을 알고있는 상태가 됨)
  • definitely typed (github repo)는 npm js에 속한 많은 라이브러리들이 들어있는 디렉토리이다.
  • 여기에는 수많은 type과 interface들이 있다.
  • https://github.com/DefinitelyTyped/DefinitelyTyped

즉 typescript + react사용하며 유명한 library를 사용하려 한다면 @types/[library]를 설치 typescript가 라이브러리의 타입을 알 수 있다.

사용하려는 library가 @types가 없다면?

• tsconfig.json에서 "noImplicitAny": false 를 설정해주자.
  • type을 못찾았다는 의미이다.
• 하지만 보통 유명한 라이브러리들은 @types가 없는 경우는 거의 없다.

참고

• https://www.typescriptlang.org/docs/handbook/basic-types.html#boolean
• https://heropy.blog/2020/01/27/typescript/