TypeScript

설치하기

📌 노드 버전 업데이트 후

npm install -g typescript

npx create-react-app <your file> --template typescript

사용하기

tsconfig.json 파일 생성후 밑의 코드 작성 & .ts 확장자 파일명 생성 후, 코드 작성을 하면된다.

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs"
  }
}

.ts 파일은 브라우저에서 읽지 못한다. js 코드만 읽을 수 있음! 그러므로 ts파일을 js로 변환해야한다.

변환하기 : 터미널에 tsc -w 명령어를 입력 후 종료하지 않고 코드작성을 하면 js 파일이 자동으로 생성되며 저장할때마다 갱신된다. (컴파일 과정)

tsconfig.json파일은 ts에서 js 컴파일시 옵션을 설정하는 파일이다.

• 넣을만한 설정들

  {
   "compilerOptions": {
  
    "target": "es5", // 'es3', 'es5', 'es2015', 'es2016', 'es2017','es2018', 'esnext' 가능
    "module": "commonjs", //무슨 import 문법 쓸건지 'commonjs', 'amd', 'es2015', 'esnext'
    "allowJs": true, // js 파일들 ts에서 import해서 쓸 수 있는지 
    "checkJs": true, // 일반 js 파일에서도 에러체크 여부 
    "jsx": "preserve", // tsx 파일을 jsx로 어떻게 컴파일할 것인지 'preserve', 'react-native', 'react'
    "declaration": true, //컴파일시 .d.ts 파일도 자동으로 함께생성 (현재쓰는 모든 타입이 정의된 파일)
    "outFile": "./", //모든 ts파일을 js파일 하나로 컴파일해줌 (module이 none, amd, system일 때만 가능)
    "outDir": "./", //js파일 아웃풋 경로바꾸기
    "rootDir": "./", //루트경로 바꾸기 (js 파일 아웃풋 경로에 영향줌)
    "removeComments": true, //컴파일시 주석제거 
  
    "strict": true, //strict 관련, noimplicit 어쩌구 관련 모드 전부 켜기
    "noImplicitAny": true, //any타입 금지 여부
    "strictNullChecks": true, //null, undefined 타입에 이상한 짓 할시 에러내기 
    "strictFunctionTypes": true, //함수파라미터 타입체크 강하게 
    "strictPropertyInitialization": true, //class constructor 작성시 타입체크 강하게
    "noImplicitThis": true, //this 키워드가 any 타입일 경우 에러내기
    "alwaysStrict": true, //자바스크립트 "use strict" 모드 켜기
  
    "noUnusedLocals": true, //쓰지않는 지역변수 있으면 에러내기
    "noUnusedParameters": true, //쓰지않는 파라미터 있으면 에러내기
    "noImplicitReturns": true, //함수에서 return 빼먹으면 에러내기 
    "noFallthroughCasesInSwitch": true, //switch문 이상하면 에러내기 
   }
  }

void?

함수가 무언갈 return하는걸 원하지 않을때 void를 사용하고

void를 사용했는데 return을 했다면 에러가 발생한다.

• ex

  function void(x:number) : void{
  	x + 1
  }

옵션

?는 undefined랑 동일

들어올수도 있고 안 들어올수도 있다.

(x :number | undefined) === (x? :number)

파라미터가 옵션일 경우

• ex

  function optionParameter (x? :number) {
  
  }

객체에서도 사용됨

{age? : number}

정리

type Score = 'A' | 'B' | 'C' | 'F'

interface User{
	name : string;
	age : number;
	gender? : string; // 있을수도있고 없을수도있고
	readonly	birtYear : number; // 읽기전용이라 수정이 불가능하다.
	[grade:number] : string; // grade에는 의미가 없음. number 타입의 키로 string 값이 들어온다.
	[grade:number] : Score; // 타입으로 정한 Score외의 값은 들어올 수 없다.
}

let user : User = {
	name: 'dd',
	age: 25,
	birtYear: 2000,
	1 : 'A'
}

interface Car {
	color: string;
	wheels: number;
	start(): void;
}

class Bmw inplements Car {
	color;
	wheels = 4;
	constructor(c:string){
		this.color = c;
	}
	start(){
		console.log('go...')
	}
}

const b = new Bmw('green')

// 선택적 매개변수보다 필수적 매개변수가 앞에 있어야하는데 선택적 매개변수를 앞에 두고 싶다면
function hello(age: number | undefined, name: string): string {
	return `${name}, ${age}`
}
console.log(hello(undefined, 'sam'))

// this값 type정하기
interface User {
	name: string;
}

const Sam: User = {name: 'Sam'}

// this설정 이후 age가 첫번째 매개변수로 gender가 두번째 매개면수로 
function showName(this:User, age:number, gender:'m' | 'f'){
	console.log(this.name, age, gender)
}

const a = showName.bind(Sam);
a(30, 'm');

// 오버로드
// 들어오는 매개변수 값에 따라서 결과값이 달라져야할때

interface User {
	name: string;
	age: number;
}

function join(name: string, age: number | string): User | string {
	if(typeof age === number){
		return {
			name,
			age,
		};
	} else {
		return '어쩌구';
	}
}

const sam: User = join('Sam', 30);
const jane: string = join('Jane', "30);
// 이렇게만 작성한다면 오류가난다.

function join (name: string, age: string): string;
function join (name: string, age: number): User;
// 위 두줄을 추가해주어야(오버로드) 오류가 나지 않는다.

접근 제한자 - public, private, protected

• public: 자식 클래스, 클래스 인스턴스 모두 접근 가능
• protected: 자식 클래스에서 접근 가능
• privite: 해당 클래스 내부에서만 접근 가능 ( ‘#’으로 접근 가능)

클레스에서 static을 앞에 붙치면 불러올때 this가 아닌 해당 클레스 이름을 붙쳐야한다. (this.name X, 클레스이름.name O)

Generic -> 들어올 인자의 타입이 정해져있지 않을때..? 유니온타입 혹은 오버로드로 해결할 수 있지만 많을때..?

function getSize<T>(arr: T[]): number{
	return arr.length;
}

// 원래같음
function getSize(arr: number | string | boolean...): number{
	return arr.length;
}

interface Mobile<T> {
	name: string;
	price: number;
	option: T;
}

const m1: Mobile<Object> = {
	option: {
		color: 'red';
	}
}

const m1: Mobile<string> = {
	option: 'good';
}

interface User {
	name: sting;
	age: number;
}

interface Car {
	name: string;
	color: string;
}

interface Book {
	price: number;
}

const user: User = {name: 'a', age: 10};
const car: Car = {name: 'a', age: 10};
const book: Book = {price: 10};

function showName<T extends {name: string}>(data: T): string {
	return data.name;
}

// keyof
interface User {
	id: number;
	name: string;
	age: number;
	gender: 'm' | 'f'
}
type UserKey = keyof User; // 'id' | 'name' |'age' | 'gender'

Partial -> 인터페이스 안에서 모든 속성을 사용하지 않을때

interface User {
	id: number;
	name: string;
	age: number;
	gender: 'm' | 'f'
}

let admin: Partial<User> = {
	id: 1,
	name: 'Bob'
}

Required -> 인터페이스 안의 모든 속성을 사용해야 할때

interface User {
	id: number;
	name: string;
	age?: number;
}

let admin: Required<User> = {
	id: 1,
	name: 'Bob'
}

Readonly → 할당만가능 수정은 불가능

interface User {
	id: number;
	name: string;
	age?: number;
}

let admin: Readonly<User> = {
	id: 1,
	name: 'Bob'
}

Record<K, T>

Pick<T, K> → pick 에 작성된 것들만 가져와서 사용할 수 있다.

Omit<T,K> → 특정 프로퍼티를 생략하여 사용가능하다.

Exclude<T1, T2> → 타입1에서 타입2를 제거해 사용할 수 있다. 타입으로제거

type T1 = string | number | boolean
type T2 = Exclude<T1,number | string> // boolean
type T2 = Exclude<T1,number> // string, boolean

NonNullable → null을 제외한 타입을 생성한다(undefined포함)

type T1 = string | null | undefined | void;
type T2 = NonNullable<T1> // string | void