I. Giới thiệu
Trong sự kiện WWDC 2019, có 2 framework mà chúng ta cần quan tâm nhiều nhất: SwiftUI framework và Combine framework. Cả 2 framework này đều cực kỳ quan trọng, tương lai của lập trình iOS sẽ sử dụng rất nhiều 2 framework này.
- SwiftUI: Đây là framework sẽ thay đổi cách chúng ta xây dựng UI, và bởi vì UI có tác động tương đối lớn đến cách chúng ta sắp xếp code logic, code iOS sẽ thay đổi rất nhiều trong tương lai. Nếu theo dõi các bài viết gần đây của tôi liên quan đến SwiftUI, các bạn có thể thấy sự thay đổi này.
- Combine: Đây là framework giúp chúng ta xử lý dữ liệu theo thời gian. Tư tưởng của nó cũng khá giống với RxSwift, cũng có những thứ tương tự như Observable ,subscribe,.. của RxSwift.
Vậy thì 2 framework này liên quan gì đến property wrapper? và property wrapper là cái gì mà chúng ta cần phải tìm hiểu? Câu trả lời là property wrapper rất quan trọng với cả 2 framework này, cả 2 đều sử dụng property wrapper rất nhiều. Và bởi vì SwiftUI và Combine đều sẽ được sử dụng nhiều trong tương lai, thế nên là property wrapper cũng sẽ là thứ rất quan trọng cần phải biết.
Trong bài viết này, chúng ta sẽ cùng tìm hiểu về property wrapper, cách sử dụng property wrapper trong code thực tiễn.
II. Nội dung
1. Property wrapper là gì
Cái tên của property wrapper cũng đã mang nhiều ý nghĩa, property wrapper là vỏ bọc của property. Về cơ bản, property wrapper là một cấu trúc dữ liệu, nó sẽ đóng gói property, và bổ xung thêm một vài chức năng cho property đó.
Property wrapper có thể là dạng struct, class hoặc enum. Trước Swift 5.1, Swift đã có nhiều builtin wrappers như lazy, @NSCopying, và SwiftUI cũng có nhiều builtin wrappers như @State, @Binding,… Từ Swift 5.1 trở đi, chúng ta có thể viết thêm các custom property wrapper để phục vụ mục đích của mình
Lý thuyết thì khá là khó hiểu, dưới đây chúng ta sẽ cùng thực hành, tìm hiểu cách viết property wrapper.
2. tạo Property wrapper
Đầu tiên, các bạn mở Xcode, tạo 1 Playground project mới để chúng ta bắt đầu viết code: Xcode -> File -> New -> Playground… -> Blank -> Create project.
Bây giờ, giả định chúng ta cần viết code để biến đoạn string từ chữ viết thường sang viết hoa. Tất nhiên là String đã hỗ trợ hàm uppercased() nên chúng ta hoàn toàn có thể viết đơn giản như sau:
1 2 3 | <span class="token keyword">var</span> str <span class="token operator">=</span> <span class="token string">"Hello, playground"</span> str<span class="token punctuation">.</span><span class="token function">uppercased</span><span class="token punctuation">(</span><span class="token punctuation">)</span> |
Trong trường hợp không muốn phải gọi hàm uppercased() mà vẫn muốn str biến thành chữ hoa thì sao? Câu trả lời là chúng ta sẽ tạo wrapper cho String, trong wrapper này sẽ xử lý gọi uppercased() mỗi khi get/set cho String
Đầu tiên, tạo Struct wrapper cho String như sau:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | @propertyWrapper <span class="token comment">// 1</span> <span class="token keyword">struct</span> <span class="token builtin">Uppercased</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> value<span class="token punctuation">:</span> <span class="token builtin">String</span> <span class="token comment">// 2</span> <span class="token keyword">var</span> wrappedValue<span class="token punctuation">:</span> <span class="token builtin">String</span> <span class="token punctuation">{</span> <span class="token comment">// 3</span> <span class="token keyword">get</span> <span class="token punctuation">{</span> value<span class="token punctuation">.</span><span class="token function">uppercased</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token keyword">set</span> <span class="token punctuation">{</span> value <span class="token operator">=</span> newValue <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token comment">// 4</span> <span class="token keyword">init</span><span class="token punctuation">(</span>wrappedValue<span class="token punctuation">:</span> <span class="token builtin">String</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">self</span><span class="token punctuation">.</span>value <span class="token operator">=</span> wrappedValue <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Trong đoạn code trên, chúng ta lần lượt làm các việc:
- Khai báo keyword @propertyWrapper để compiler biết được struct Uppercased là một dạng property wrapper
- Khai báo property value để giữ data của String
- Khai báo computed property wrappedValue để thực hiện code mỗi khi get/set cho String
- Tạo hàm khởi tạo cho property wrapper struct
Trong các phần trên, các bạn cần lưu ý wrappedValue. Đây là property bắt buộc phải có của @propertyWrapper, và cũng chính là String của chúng ta. wrappedValue có thể là computed property hoặc stored property, vì thế nên thay vì viết như trên chúng ta hoàn toàn có thể viết struct Uppercased như sau:
1 2 3 4 5 6 7 8 9 | @propertyWrapper <span class="token keyword">struct</span> <span class="token builtin">Uppercased2</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> wrappedValue<span class="token punctuation">:</span> <span class="token builtin">String</span> <span class="token punctuation">{</span> <span class="token keyword">didSet</span> <span class="token punctuation">{</span> <span class="token keyword">self</span><span class="token punctuation">.</span>wrappedValue <span class="token operator">=</span> <span class="token keyword">self</span><span class="token punctuation">.</span>wrappedValue<span class="token punctuation">.</span><span class="token function">uppercased</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Bên trên, chúng ta khai báo wrappedValue dạng stored property. Nhưng các bạn cần lưu ý khi gán giá trị khởi tạo, didSet sẽ chưa được gọi trong lần đầu tiên, bên dưới tôi sẽ nói về vấn đề này.
3. Sử dụng property wrapper
Ok, chúng ta đã tạo được property wrapper Uppercased và Uppercased2 rồi, bây giờ chúng ta sẽ tìm hiểu cách sử dụng nó. Cách sử dụng property wrapper rất đơn giản, các bạn chỉ cần sử dụng keyword ‘@‘ + tên struct trước khai báo property
1 2 3 4 5 6 7 8 9 10 11 | <span class="token comment">// 1</span> <span class="token keyword">struct</span> <span class="token builtin">Sample</span> <span class="token punctuation">{</span> @<span class="token builtin">Uppercased</span> <span class="token keyword">var</span> str <span class="token operator">=</span> <span class="token string">"Hello, playground"</span> <span class="token comment">// 2</span> @<span class="token builtin">Uppercased2</span> <span class="token keyword">var</span> str2 <span class="token operator">=</span> <span class="token string">"Hello, playground"</span> <span class="token comment">// 3</span> <span class="token punctuation">}</span> <span class="token comment">// 4</span> <span class="token keyword">var</span> sample <span class="token operator">=</span> <span class="token function">Sample</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token function">print</span><span class="token punctuation">(</span>sample<span class="token punctuation">.</span>str<span class="token punctuation">)</span> <span class="token function">print</span><span class="token punctuation">(</span>sample<span class="token punctuation">.</span>str2<span class="token punctuation">)</span> |
Trong code trên, chúng ta lần lượt làm:
- Define struct Sample để sử dụng property wrapper.
- Khai báo property str với kiểu String, và wrapped trong Uppercased
- Khai báo property str2 với kiểu String, và wrapped trong Uppercased2
- In 2 string str, str2 ra console log
Bên trên, Uppercased và Uppercased2 được sử dụng bằng cách thêm chữ ‘@’ vào trước, và lúc này 2 String str và str2 đã được wrap trong property wrapper. Nhìn lại trong 2 property wrapper struct, wrappedValue đề là dạng string, nên 2 struct này chỉ dùng cho các String. Nếu chúng ta viết:
1 2 3 4 5 | <span class="token keyword">struct</span> <span class="token builtin">Sample</span> <span class="token punctuation">{</span> @<span class="token builtin">Uppercased</span> <span class="token keyword">var</span> str <span class="token operator">=</span> <span class="token number">1</span> @<span class="token builtin">Uppercased2</span> <span class="token keyword">var</span> str2 <span class="token operator">=</span> <span class="token string">"Hello, playground"</span> <span class="token punctuation">}</span> |
Lỗi trả về:
1 2 | Cannot convert value of type 'Int' to expected argument type 'String' |
Bởi vì str được gán giá trị bằng 1, tức là nó được ngầm định là dạng Int, mà struct Uppercased lại có wrappedValue là dạng String, nên nó chỉ chấp nhận dạng String, compiler sẽ báo lỗi.
Chúng ta hoàn toàn có thể viết class/struct property wrapper dạng generic để đa dạng hoá các kiểu dữ liệu mà property wrapper có thể dùng. Chúng ta sẽ thực hiện việc này trong phía dưới của bài viết này.
Lưu ý, khi str và str2 được in ra trên console log, kết quả:
1 2 3 | <span class="token constant">HELLO</span><span class="token punctuation">,</span> <span class="token constant">PLAYGROUND</span> <span class="token comment">// str</span> <span class="token builtin">Hello</span><span class="token punctuation">,</span> playground <span class="token comment">// str2</span> |
chỉ str ra kết quả mong muốn, còn str2 thì không. Bởi vì khi khởi tạo giá trị ban đầu cho str2, didSet của wrappedValue chưa được gọi vào. Để didSet được gọi, chúng ta cần thay đổi giá trị của str2:
1 2 3 | sample<span class="token punctuation">.</span>str2<span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span><span class="token string">"2"</span><span class="token punctuation">)</span> <span class="token function">print</span><span class="token punctuation">(</span>sample<span class="token punctuation">.</span>str2<span class="token punctuation">)</span> <span class="token comment">// HELLO, PLAYGROUND2</span> |
Trong bản Swift 5.1 hiện tại, property wrapper chỉ có thể sử dụng với property của class/struct, chứ chưa thể khai báo dạng top-level hoặc biến của function.
Trường hợp khai báo bên ngoài struct Sample:
1 2 | @<span class="token builtin">Uppercased</span> <span class="token keyword">var</span> str <span class="token operator">=</span> <span class="token string">"Hello, playground"</span> |
Lỗi trả về:
1 2 | Property wrappers are not yet supported in top-level code |
Trường hợp khai báo bên trong function:
1 2 3 4 5 6 7 8 9 10 | <span class="token keyword">struct</span> <span class="token builtin">Sample</span> <span class="token punctuation">{</span> @<span class="token builtin">Uppercased</span> <span class="token keyword">var</span> str <span class="token operator">=</span> <span class="token string">"Hello, playground"</span> @<span class="token builtin">Uppercased2</span> <span class="token keyword">var</span> str2 <span class="token operator">=</span> <span class="token string">"Hello, playground"</span> <span class="token keyword">func</span> testFunction <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> @<span class="token builtin">Uppercased</span> <span class="token keyword">var</span> testString <span class="token operator">=</span> <span class="token string">"Hello, playground"</span> <span class="token function">print</span><span class="token punctuation">(</span>testString<span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Lỗi trả về:
1 2 | Property wrappers are not yet supported on local properties |
4. Tạo generic property wrapper với initial value
Bây giờ chúng ta sẽ tạo một property wrapper struct để sử dụng cho các optional property, khai báo giá trị mặc định và gán cho property mỗi khi nó nil
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | @propertyWrapper <span class="token comment">// 1</span> <span class="token keyword">struct</span> <span class="token builtin">DefaultValue</span><span class="token operator"><</span><span class="token builtin">Value</span><span class="token operator">></span> <span class="token punctuation">{</span> <span class="token keyword">private</span> <span class="token keyword">let</span> defaultValue<span class="token punctuation">:</span> <span class="token builtin">Value</span> <span class="token keyword">var</span> wrappedValue<span class="token punctuation">:</span> <span class="token builtin">Value</span><span class="token operator">?</span> <span class="token punctuation">{</span> <span class="token keyword">didSet</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token keyword">self</span><span class="token punctuation">.</span>wrappedValue <span class="token operator">==</span> <span class="token constant">nil</span> <span class="token punctuation">{</span> <span class="token keyword">self</span><span class="token punctuation">.</span>wrappedValue <span class="token operator">=</span> defaultValue <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token comment">// 2</span> <span class="token keyword">init</span><span class="token punctuation">(</span>defaultValue<span class="token punctuation">:</span> <span class="token builtin">Value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">self</span><span class="token punctuation">.</span>defaultValue <span class="token operator">=</span> defaultValue <span class="token keyword">self</span><span class="token punctuation">.</span>wrappedValue <span class="token operator">=</span> defaultValue <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">struct</span> <span class="token builtin">Sample</span> <span class="token punctuation">{</span> <span class="token comment">// 3</span> @<span class="token function">DefaultValue</span><span class="token punctuation">(</span>defaultValue<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token keyword">var</span> number<span class="token punctuation">:</span> <span class="token builtin">Int</span><span class="token operator">?</span> @<span class="token function">DefaultValue</span><span class="token punctuation">(</span>defaultValue<span class="token punctuation">:</span> <span class="token string">"Hello"</span><span class="token punctuation">)</span> <span class="token keyword">var</span> helloString<span class="token punctuation">:</span> <span class="token builtin">String</span><span class="token operator">?</span> <span class="token punctuation">}</span> <span class="token comment">// 4</span> <span class="token function">print</span><span class="token punctuation">(</span>sample<span class="token punctuation">.</span>number<span class="token punctuation">)</span> <span class="token function">Optional</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span> <span class="token function">print</span><span class="token punctuation">(</span>sample<span class="token punctuation">.</span>helloString<span class="token punctuation">)</span> <span class="token function">Optional</span><span class="token punctuation">(</span><span class="token string">"Hello"</span><span class="token punctuation">)</span> sample<span class="token punctuation">.</span>helloString <span class="token operator">=</span> <span class="token string">"hi Viblo"</span> <span class="token function">print</span><span class="token punctuation">(</span>sample<span class="token punctuation">.</span>helloString<span class="token punctuation">)</span> <span class="token function">Optional</span><span class="token punctuation">(</span><span class="token string">"hi Viblo"</span><span class="token punctuation">)</span> |
Code bên trên lần lượt làm:
- Tạo generic struct property Wrapper để sử dụng được nhiều kiểu dữ liệu
- Viết hàm khởi tạo để gán giá trị mặc định cho wrapper
- Tạo property với wrapper là DefaultValue. ở đây chúng ta khởi tạo luôn giá trị mặc định của mỗi wrapper
- Khi in ra console log, cả 2 property number và helloString đều chưa được gán giá trị, và đều được nhận giá trị mặc định của wrapper. Khi gán giá trị cho helloString, nó sẽ có giá trị của riêng nó, như logic viết trong DefaultValue wrapper
5. sử dụng với UserDefaults
sử dụng property wrapper với UserDefaults là ví dụ thực tế nhất mà chúng ta có thể áp dụng ngay trong project. Thông thường, để get/set giá trị cho UserDefaults, chúng ta làm như sau:
1 2 3 | <span class="token builtin">UserDefaults</span><span class="token punctuation">.</span>standard<span class="token punctuation">.</span><span class="token keyword">set</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">,</span> forKey<span class="token punctuation">:</span> <span class="token string">"isPaymentEnabled"</span><span class="token punctuation">)</span> <span class="token builtin">UserDefaults</span><span class="token punctuation">.</span>standard<span class="token punctuation">.</span><span class="token function">bool</span><span class="token punctuation">(</span>forKey<span class="token punctuation">:</span> <span class="token string">"isPaymentEnabled"</span><span class="token punctuation">)</span> |
Code trên không dài, chỉ 1, 2 dòng code. Tuy nhiên khi phải làm việc nhiều với UserDefaults, sẽ là tuyệt vời hơn khi có thể rút ngắn đoạn code bên trên. Property wrapper sẽ giúp chúng ta làm việc này.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | @propertyWrapper <span class="token keyword">struct</span> <span class="token builtin">UserDefault</span><span class="token operator"><</span><span class="token builtin">Value</span><span class="token operator">></span> <span class="token punctuation">{</span> <span class="token keyword">var</span> key<span class="token punctuation">:</span> <span class="token builtin">String</span> <span class="token keyword">var</span> initialValue<span class="token punctuation">:</span> <span class="token builtin">Value</span> <span class="token keyword">var</span> wrappedValue<span class="token punctuation">:</span> <span class="token builtin">Value</span> <span class="token punctuation">{</span> <span class="token keyword">set</span> <span class="token punctuation">{</span> <span class="token builtin">UserDefaults</span><span class="token punctuation">.</span>standard<span class="token punctuation">.</span><span class="token keyword">set</span><span class="token punctuation">(</span>newValue<span class="token punctuation">,</span> forKey<span class="token punctuation">:</span> key<span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token keyword">get</span> <span class="token punctuation">{</span> <span class="token builtin">UserDefaults</span><span class="token punctuation">.</span>standard<span class="token punctuation">.</span><span class="token function">object</span><span class="token punctuation">(</span>forKey<span class="token punctuation">:</span> key<span class="token punctuation">)</span> <span class="token keyword">as</span><span class="token operator">?</span> <span class="token builtin">Value</span> <span class="token operator">?</span><span class="token operator">?</span> initialValue <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">struct</span> <span class="token builtin">Sample</span> <span class="token punctuation">{</span> @<span class="token function">UserDefault</span><span class="token punctuation">(</span>key<span class="token punctuation">:</span> <span class="token string">"isPaymentEnabled"</span><span class="token punctuation">,</span> initialValue<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">)</span> <span class="token keyword">var</span> paymentEnabled<span class="token punctuation">:</span> <span class="token builtin">Bool</span> <span class="token punctuation">}</span> <span class="token keyword">var</span> sample <span class="token operator">=</span> <span class="token function">Sample</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token function">print</span><span class="token punctuation">(</span>sample<span class="token punctuation">.</span>paymentEnabled<span class="token punctuation">)</span> <span class="token comment">// false</span> sample<span class="token punctuation">.</span>paymentEnabled <span class="token operator">=</span> <span class="token boolean">true</span> <span class="token function">print</span><span class="token punctuation">(</span>sample<span class="token punctuation">.</span>paymentEnabled<span class="token punctuation">)</span> <span class="token comment">// true</span> |
Cuối cùng, với sự trợ giúp của property wrapper, chúng ta có thể dùng Userdefaults như dùng một property bình thường
III. Kết luận
Trên đây, tôi đã giới thiệu về property wrapper, ý nghĩa của nó đối với iOS trong tương lai, và cách tạo custom wrapper để sử dụng trong project. Xin cảm ơn các bạn đã theo dõi bài viết này, have a nice day.