Project/근육고양이 (6) 썸네일형 리스트형 [근육고양이] TypeScript 심화 함수 함수에서 undefined 타입 처리, 콜백 함수, 중첩 함수에 대해 다룰 것이다. 먼저 undefined는 모든 타입의 최하위 타입이다. 다음은 undefined를 고려하지 않은 함수이다. 1 2 3 4 5 6 function getSomething(value:string):string{ return value } let something = getSomething(undefined) console.log(something) //undefined 이렇게 함수를 선언하게 되면 value가 undefined로 변하게 되어 'Cannot read property 'value' of undefined'라는 오류가 발생하게 된다. 오류를 발생하게 하지 않으려면 undefined에 대해 고려를 해주어야 한다. 다.. [근육고양이] TypeScript 함수 TypeScript에는 function, 화살표(=>)를 사용하여 함수를 만들 수 있다. function의 기본적인 함수 구조이다. 1 2 3 function 함수 이름(매개변수1, 매개변수2, ...):반환값 타입{ 함수 내용 } function을 사용한 기본적인 함수이다. 1 2 3 function Sum (number1:number, number2:number):number{ return number1 + number2 } 함수 이름 Sum과 매개변수 number1, number2 반환값 타입 :number 반환값 return number1 + number2로 이루어진 가장 기본적인 함수이다. 화살표(=>)의 기본적인 함수 구조이다. 1 const 함수 이름 = (매개변수1, 매개변수2, ...):.. [근육고양이] TypeScript 클래스 클래스는 객체를 만들어내기 위한 설계도이다. 타입스크립트의 기본적인 클래스 선언 방법이다. 클래스 사용 1 2 3 4 5 6 7 8 9 10 11 12 class MuscleCat{ name: string muscleMass: number cute?: boolean } function Cat() { let normalCat01: MuscleCat = new MuscleCat() normalCat01.name = 'Mason', normalCat01.muscleMass = 30 console.log(normalCat01) //MuscleCat {"muscleMass": 30,"name": "Mason",} } 클래스 안에 필요한 속성들을 정의하여 준다. MuscleCat 클래스에 new 연산자를 적용해 n.. [근육고양이] TypeScript 객체와 인터페이스 객체와 인터페이스 객체 object타입은 number, string, boolean 타입의 값을 초기값으로 가질 수는 없지만 객체로 선언된 값들은 모두 가질 수 있다. 1 2 3 4 5 function ObjectExample() { let object_ex: object = { name: '근육고양이', age: 13} object_ex = 1 //Type '1' is not assignable to type 'object'. object_ex = {hello: '안녕', introduce: '내 이름을 소개하지', name: '난 근육고양이'} } 위의 코드처럼 {}를 사용하여 객체로 만들어서 값을 넣어주면 object타입의 변수에 값을 넣어줄 수 있다. 인터페이스 interface는 객체의 타입을 .. [근육고양이] TypeScript 변수와 타입 let과 const 그리고 변수 let으로 선언한 변수의 특징 변수의 값이 수시로 변경되어야 할때 사용한다. 명시한 타입 또는 타입 추론을 하여 타입이 결정되었을 때 해당 타입의 값으로만 값을 변경할 수 있다. const로 선언한 변수의 특징 변수의 값이 변경되지 않을 때 사용한다. 생성할 때 초기값을 반드시 명시해야한다. 기본화면 코드 먼저 보여주겠다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 import React, { Component } from 'react'; import {View, Text, Button, Alert,StyleSheet} from 'react-native'; export default class App e.. [근육고양이] 기획 개발환경 리액트 네이티브 + expo 타입스크립트 설명 근육고양이는 타입스크립트의 기초에 대해 다루는 프로젝트가 될 것이다. 프로젝트의 마지막에는 타입스크립트의 기초들을 목록으로 만들어 버튼을 누르면 해당 내용이 나오게 되는 앱을 만들 것이다. 기획의도 리액트 네이티브를 공부함에 있어서 타입스크립트에 대한 지식이 부족하다는 것을 글을 올리면서 계속 느꼈고 리액트 네이티브를 계속하는데 지장이 있다고 생각하여 타입스크립트 기초를 공부하면서 마지막에 앱을 하나 만들자라고 생각하여서 기획하게 되었다. 목표 타입스크립트에 대한 전반적인 지식 습득 이전 1 다음
