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