TypeScript Memo_2

1. : 뒤엔 무조건 타입 // *중요 : 뒤에 오는건 무조건 타입이라고 인지

2. 변수명 : person[] // 해당 변수명에 person이란 타입을 가진 배열 [person,person..]이 온다는것

3. 타입명 : 타입1 & { 객체 ...} // 해당 타입에 타입1,타입2를 혼합한 타입을 만듬

type Developer = Person & {
  skills: string[];
};

3.타입선언시 유의사항 ; 세미콜론을 구분자로 사용함

타입을 객체 타입으로 생성시에 아래와 같은 형태가 된다
(자바스크립트의 객체와는 다르게 ;를 구분자로 사용한다 자바스크립트는 구분자,임)

type Person = {
  name: string; // 세미콜론
  age: number;
  sayHello: () => void; 
};

4.다양한 데이터타입의 배열

let mixedArray: (number | string)[] = [1, "two", 3, "four"];

5.함수타입

switchLocalePath: (locale?: string | undefined) => string
// 함수명 switchLocalePath 
// 매개변수 locale이라는 선택적 문자열 혹은 undefined
// 반환형 string
// 이름 있는 함수 표현식
const sum = function sum(a: number, b: number): number {
  return a + b;
};
// 이름 없는 함수 표현식
const sum = function (a: number, b: number): number {
  return a + b;
};
// 화살표 함수
const sum = (a: number, b: number): number => {
  return a + b;
};

// 리턴 생략 (중요*)
const sum = (a: number, b: number): number => a + b;

// 객체의 리턴 생략은 중괄호를 구분하기 위해서 괄호가 필요하다.
const sum = (a: number, b: number): { result: number } => ({ result: a + b });

6.화살표함수 표현식

// 화살표 함수를 선언하며 동시에 타입을 지정한 예제 (주로 사용)
let myFunc3 = (x: number, y: number): number => {
   return x + y;
};

7.화살표함수를 타입스크립트로 표현할때 3가지 패턴

- 일반경우

- type을 사용하는 경우

-interface를 사용하는 경우

8.콜백함수

const logging = function (s: string) {
   console.log(s);
};

// 1.init 함수선언 
const init = (callback: (arg: string) => void) => {
   console.log('callback start');
   callback('yes!');
   console.log('callback end');
};

init(logging);

// 2.만약 위에서 const init 뒤에 : 가 온다면 해당 변수에 선언되는 함수의 타입을 지정하는것이 됨
const init:함수타입 = 함수선언

9.오버로딩

function add(a: string, b: string): string; // 오버로드 함수 선언
function add(a: number, b: number): number; // 오버로드 함수 선언
function add(a: any, b: any): any { // 오버로드 함수 실행부 (any를 써준다)
  return a + b;
}

add('hello ', 'world~');
add(1, 2);

10.실제 프로젝트에서 함수 타입 지정예제

1.
선언
const useState: <string>(key?: string | undefined, init?: (() => string | globalThis.Ref<string>) | undefined) => globalThis.Ref<string> 
       함수명 : 함수타입(화살표)
       함수명 : 제너릭 (매개변수) => 반환형 
               *변수명생략<제너릭>(매개변수)=>실행내용 // 형식이기때문에 <>의 내용은 타입단언이 아니라 제너릭이다

호출
const locale = useState<string>('locale.i18n') // key만 전달후 init은 전달하지 않음 

2.
선언
switchLocalePath: (locale?: string | undefined) => string
           함수명 : 함수타입(화살표)
           함수명 : locale로 사용할 string을 전달한며 반환형은 문자열이다

 호출
 switchLocalePath(lang.iso)

11.타입단언

var foo = {};
foo.bar = 123; // 오류: 속성 'bar'가 `{}`에 존재하지 않음
foo.bas = 'hello'; // 오류: 속성 'bar'가 `{}`에 존재하지 않음

interface Foo {
    bar: number;
    bas: string;
}
var foo = {} as Foo; // 1.{}을 Foo타입이라고 단언한다 
foo.bar = 123;       // 2.에러안남
foo.bas = 'hello';

var foo: any;
var bar = <string> foo; // 3.꺽쇠를 변수명앞에 사용하면서 타입단언을 할수있음 // 이제 bar의 타입은 "문자열"입니다

12.타입단언시 꺽쇠와 제너릭의 꺽쇠의 차이 예제

// 1.타입단언 (변수앞)
let value: any = "Hello, TypeScript!";
let strLength: number = (<string>value).length;

// 2.제너릭 (변수뒤)
function identity<T>(arg: T): T {
  return arg;
}
let stringValue: string = "Hello, TypeScript!";
let result: string = identity<string>(stringValue);


참조

코딩악마님의 제너릭강의

타입스크립트의 함수표현시

타입스크립트의 함수표현시2(인파님)

Oct 1, 2023 Views 169